<!--
 * @docName: taxAccountDetails.vue
 * @Author: mwl
 * @Date: 2023/9/20
 * @LastEditors: zhongxiong
 * @LastEditTime: 18:23
-->
<template>
  <div class='content'>
    <div class='title'>账户充值</div>
    <div class='header-box'>
      <div v-if='balanceList.length>0'>
        <a-statistic style='color: #2f54eb;' title="税费账户余额" :precision="2" :value="Math.round(balanceList[0].balance * 100)/10000" >
          <template #suffix>元</template>
        </a-statistic>
      </div>
    </div>
    <div class='container-div'>
      <div class='container-title'>
        充值账号
        <a-tag color="red" style='margin-left: 10px'>
          此账户仅可用于支付税费，对应费用不会开具发票，以税务局出具的完税凭证入账。
          请按展示的收款账户转款，此收款账户与通用账户收款账户不一致！
        </a-tag>
      </div>
      <div class='text'>向下方账号中转账充值，完成充值后，企业账户可用于支付</div>
      <div class='card-div'>
        <a-row>
          <a-col :span="10">
            <a-card v-if='infoZjDetails'>
              <p><span class='span'>充值账号：</span>{{ infoZjDetails.account }}</p>
              <p><span class='span'>账号名称：</span>{{ infoZjDetails.accountName }}</p>
              <p><span class='span'>开户行：</span>{{ infoZjDetails.bankName }}</p>
              <p style='text-align: right;'><a-button type='primary' @click='copyLink'>一键复制</a-button></p>
            </a-card>
            <a-card v-else>
              <a-empty />
            </a-card>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getBusinessAccountInfo, getFundSubAccountInfo, getFundSubBalance } from '@api/account'
import { copyLinkContent } from '@/utils/util'
export default {
  name: 'taxAccountDetails',
  data(){
    return{
      infoZjDetails:null,
      infoDetails:null,
      accountConfig:{
        masterType:1,//1-公户，2-私户
        masterId:null,//masterType为2的情况下传值
        switchShow:true,
      },
      balanceList:[],
    }
  },
  created() {

  },
  mounted() {
    this.getFundSubBalanceFun()
    this.getFundSubAccountInfoFun()
  },
  methods:{
    clickEvent(e){
      console.log(12,e)
    },
    //复制链接
    copyLink() {
      let copyForm = '充值账号：'+this.infoZjDetails.account+'\n账号名称：'+this.infoZjDetails.accountName+'\n开户行：'+this.infoZjDetails.bankName
      copyLinkContent(copyForm, this);
    },
    //跳转账户管理
    goToSetUpFun(){
      this.$router.push({
        path: '/myAccount/entAccountManagementAdd',
        query:{
          masterType:1
        }
      });
    },
    //余额查询
    getFundSubBalanceFun(){
      let params = {};
      if(this.$route.query.bizId){
        params.clientType = 1;  //1企业  2渠道
        params.accountType = 2; //1：通用账户 2：税费账户
        params.entId = this.$route.query.bizId;
      }else{
        params.accountType = 2;
        params.clientType = 2;  //1企业  2渠道
      }
      getFundSubBalance(params).then(res => {
        if (res.success) {
          let data = res.result;
          this.balanceList = data.balanceInfoVoList;
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //资金账户详情
    getFundSubAccountInfoFun(){
      let params = {};
      if(this.$route.query.bizId){
        params.category = 1;  //1企业  2渠道
        params.accountType = 2; //1：通用账户 2：税费账户
        params.entId = this.$route.query.bizId;
      }else{
        params.category = 2;  //1企业  2渠道
        params.accountType = 2; //1：通用账户 2：税费账户
      }
      getFundSubAccountInfo(params).then(res => {
        if (res.success) {
          // // 赋值表格数据
          this.infoZjDetails = res.result ;

          this.loading = false;
        }else{
          this.$message.warning(res.message)
        }
      })
    },
  }
}
</script>

<style scoped lang='less'>
.content {
  background: #fff;
  box-sizing: border-box;
  padding: 20px;
  /deep/.ant-statistic{
    display: flex;
    align-items: flex-end;
  }
  /deep/.ant-statistic-title{
    font-weight: bolder;
    color: @color-smudge;
  }
  /deep/.ant-steps-item-title{
    &:hover{
      cursor: pointer;
    }
  }
  /deep/.ant-statistic-content{
    margin-left: 20px;
    color: @color-blue;
  }
  .title {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    padding: 10px 0 10px;
  }
  .header-box{
    padding: 20px 0;
    border-bottom: 1px solid #CCC;
    span{
      color: #4167E8;
      font-size: 30px;
      padding-right: 10px;
    }
  }
  .container-div{
    padding-bottom: 30px;
    .container-title{
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      padding:30px 0 10px;
    }
    .text{
      display: block;
    }
    .text-div{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .card-div{
      margin: 20px 0;
      .span{
        display: inline-block;
        width: 30%;
      }
      /deep/ .ant-card-body{
        background: #fbfcff;
      }
    }
  }
}

</style>
